<template>
	<div class="user">
		<div class="setting-left">
			<div class="avator-wapper">
				<div class="avator-mode">
			        <img class="avator-img" src="http://img.mukewang.com/546aaa86000191cd01000100-200-200.jpg" data-portrait="546aaa86000191cd01000100" width="92" height="92">
			     </div>
			</div>
			<div class="des-mode">
				<p>南有佳木</p>
			</div>
			<div class="list-wapper">
				<h2>账户管理</h2>
				<div class="line"></div>
			    <el-menu default-active="2" class="el-menu-vertical-demo">
			      <el-menu-item index="2">个人设置<i class="el-icon-arrow-right pull-right"></i></el-menu-item>
			      <el-menu-item index="3">导航二<i class="el-icon-arrow-right pull-right"></i></el-menu-item>
			    </el-menu>
			</div>
		</div>
		<div class="setting-right">
			<div class="itemBox">
            	<div class="left"><span class="iconfont">&#xe60b;</span></i></div>
            	<div class="center">
            		<p> <span class="font1">密码</span> 已设置</p>
            		<p class="font2">用于保护账号信息和登录安全</p>
            	</div>
            	<div class="right">
                    <a href="javascript:void(0);" class="moco-btn moco-btn-normal js-changePWD" @click="dialogFormVisible = true ">修改</a>
                </div>
            </div>
		</div>

		<!-- 修改密码弹框 -->
		<el-dialog title="修改密码" :visible.sync="dialogFormVisible">
		  <el-form :model="form">
		    <el-form-item label="输入原始密码" :label-width="formLabelWidth">
		      <el-input v-model="form.name" auto-complete="off"></el-input>
		    </el-form-item>
		    <el-form-item label="输入新密码" :label-width="formLabelWidth">
		      <el-input v-model="form.name" auto-complete="off"></el-input>
		    </el-form-item>
		    <el-form-item label="确认新密码" :label-width="formLabelWidth">
		      <el-input v-model="form.name" auto-complete="off"></el-input>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
		  </div>
		</el-dialog>

	</div>
</template>

<script>
	export default{
		name: 'payConter',
		data() {
	      return {
	        dialogFormVisible:false,
	        form: {
	          name: '',
	          region: '',
	          date1: '',
	          date2: '',
	          delivery: false,
	          type: [],
	          resource: '',
	          desc: ''
	        },
	        formLabelWidth: '120px'
	      }
	    },
		methods: {
	     	
	    }
	}
	
</script>

<style lang="less">
body{background:#fff;}
.user{
	.pull-right{float:right;}
	width:1150px;
	margin:0 auto;
	overflow: hidden;
	padding:75px 0 20px;
	.setting-left{
		width:216px;
        height: 800px;
		float:left;
		background: #f8fafc;
		.avator-wapper{
			padding:32px 0 0px;
			.avator-mode {
			    position: relative;
			    width: 100px;
			    height: 100px;
			    box-sizing: border-box;
			    border: 4px solid #d9dde1;
			    border-radius: 50px;
			    margin: 0 auto;
			    text-align: center;
			    overflow: hidden;
			}
		}
		.des-mode {
		    font-size: 16px;
		    text-align: center;
		    p {
			    line-height: 44px;
			    width: 160px;
			    margin: 0 auto;
			    overflow: hidden;
			    text-overflow: ellipsis;
			    white-space: nowrap;
			}
		}
		.list-wapper h2 {
		    font-size: 16px;
		    line-height: 24px;
		    margin: 12px 24px;
		    font-weight: 700;
		}
		.list-wapper .line {
		    height: 1px;
		    background-color: #d9dde1;
		    margin: 0 24px 10px;
		}
	}
	.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item.is-active, .el-menu-item i{
		line-height:56px;
	}
	.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item.is-active, .el-menu-item.is-active {
    	color: #fff;
    	background-color: #f01414;
	}
	.setting-right{
		float: left;
	    margin-left: 48px;
	    width:882px;
	    box-sizing: border-box;
	    background-color: #fff;
	    .itemBox {
		    height: 88px;
		    overflow: hidden;
		    margin: auto;
		    border-bottom: 1px solid #d9dde1;
		}
		.itemBox .left {
		    width: 60px;
		    float: left;
		    font-size: 36px;
		    color: #d9dde1;
		    line-height: 98px;
		    padding-left: 24px;
		}
		.itemBox .center {
		    padding-top: 22px;
		    width: 510px;
		    float: left;
		}
		.itemBox p {
		    line-height: 24px;
		    font-size: 12px;
		}
		.itemBox .font1 {
		    color: #2b333b;
		    font-size: 16px;
		    font-weight: 700;
		}
		.itemBox .font2 {
		    color: #93999f;
		    font-size: 14px;
		}
		.itemBox .right {
		    float: right;
		    padding-right: 12px;
		    margin-top: 38px;
		}
		.itemBox .right .moco-btn-normal {
	    	padding-left: 15px;
	    	padding-right: 15px;
	    	background-color: #fff;
		    border-color: #d0d6d9;
		    border-style: solid;
		    border-width: 1px;
		    cursor: pointer;
		    padding: 6px 12px;
		    text-decoration: none;
		    color:#787D82;
		    border-radius:2px;

		}
		.itemBox .right .moco-btn-normal:hover {
		    color: #787D82;
		    background-color: #edf1f2;
		    border-color: #98a1a6;
		}
		.iconfont{
            display: inline-block;
            font-family:"iconfont";
            color:#d9dde1;
            font-size: 32px;
            cursor: pointer;
            -webkit-transition: -webkit-transform 0.4s ease-out;
            -moz-transition: -moz-transform 0.4s ease-out;
            -o-transition: -o-transform 0.4s ease-out;
            -ms-transition: -ms-transform 0.4s ease-out;
        }
	}
	.el-form-item__content {
    	width:440px;
	}
}

</style>